<template>
  <div class="setting-container">
    <!-- 顶部导航栏 -->
    <TopNavBar> </TopNavBar>

    <!-- 设置页面主体 -->
    <div class="setting-main">
      <van-collapse v-model="activeNames">
        <!-- 抱闸控制 -->
        <van-collapse-item title="抱闸控制" name="brake-control" class="brake-control-container">
          <div class="brake-box">
            <div class="brake-item">
              <span class="brake-title">升降抱闸</span>
              <van-switch v-model="liftBrakeSwitch" />
            </div>

            <div class="brake-item">
              <span class="brake-title">所有抱闸</span>
              <van-switch v-model="allBrakeSwitch" />
            </div>
          </div>
        </van-collapse-item>

        <!-- 行驶电机控制 -->
        <van-collapse-item
          title="行驶电机控制"
          name="drive-motor-control"
          class="drive-motor-control-container"
        >
          <div class="drive-motor-control-box">
            <van-button
              type="primary"
              block
              size="small"
              class="drive-motor-control-item corotation-btn"
              >正转</van-button
            >
            <van-button
              type="primary"
              block
              size="small"
              class="drive-motor-control-item reversal-btn"
              >反转</van-button
            >
            <van-button type="primary" block size="small" class="drive-motor-control-item close-btn"
              >关闭</van-button
            >
          </div>
        </van-collapse-item>

        <!-- 传感器控制 -->
        <van-collapse-item
          title="传感器控制"
          name="sensor-control"
          class="sensor-control-container"
        >
          <div class="sensor-control-box">
            <van-button
              type="primary"
              block
              size="small"
              class="sensor-control-item open-obstacle-avoidance-btn"
              >打开避障</van-button
            >
            <van-button
              type="primary"
              block
              size="small"
              class="sensor-control-item close-obstacle-avoidance-btn"
              >关闭避障</van-button
            >
            <van-button
              type="primary"
              block
              size="small"
              class="sensor-control-item detect-trays-btn"
              >检测托盘</van-button
            >
            <van-button
              type="primary"
              block
              size="small"
              class="sensor-control-item close-trays-btn"
              >关闭托盘</van-button
            >
          </div>
        </van-collapse-item>

        <!-- 托盘顶升 -->
        <van-collapse-item title="托盘顶升" name="tray-lift" class="tray-lift-container">
          <div class="tray-lift-box">
            <van-button type="primary" block size="small" class="tray-lift-item tray-lift-btn"
              >连续顶升</van-button
            >
            <van-button type="primary" block size="small" class="tray-lift-item tray-stop-btn"
              >停止</van-button
            >
          </div>
        </van-collapse-item>

        <!-- 电机控制 -->
        <van-collapse-item title="电机控制" name="motor-control" class="motor-control-container">
          <div class="motor-control-box">
            <van-button type="primary" block size="small" class="motor-control-item corotation-btn"
              >正转</van-button
            >
            <van-button type="primary" block size="small" class="motor-control-item reversal-btn"
              >反转</van-button
            >
            <van-button type="primary" block size="small" class="motor-control-item close-btn"
              >关闭</van-button
            >
          </div>
        </van-collapse-item>

        <!-- 升降电机1 -->
        <van-collapse-item title="升降电机1" name="lift1" class="lift1-container">
          <div class="lift1-box">
            <van-button type="primary" block size="small" class="lift1-item rising-btn"
              >上升</van-button
            >
            <van-button type="primary" block size="small" class="lift1-item falling-btn"
              >下降</van-button
            >
            <van-button type="primary" block size="small" class="lift1-item stop-btn"
              >暂停</van-button
            >
          </div>
        </van-collapse-item>

        <!-- 升降电机2 -->
        <van-collapse-item title="升降电机2" name="lift2" class="lift2-container">
          <div class="lift2-box">
            <van-button type="primary" block size="small" class="lift2-item rising-btn"
              >上升</van-button
            >
            <van-button type="primary" block size="small" class="lift2-item falling-btn"
              >下降</van-button
            >
            <van-button type="primary" block size="small" class="lift2-item stop-btn"
              >暂停</van-button
            >
          </div>
        </van-collapse-item>

        <!-- 电磁阀 -->
        <van-collapse-item title="电磁阀" name="solenoid-valve" class="solenoid-valve-container">
          <div class="solenoid-valve-box">
            <div class="solenoid-valve-item">
              <span class="solenoid-valve-title">阀1</span>
              <van-switch v-model="valve1" />
            </div>

            <div class="solenoid-valve-item">
              <span class="solenoid-valve-title">阀2</span>
              <van-switch v-model="valve2" />
            </div>

            <div class="solenoid-valve-item">
              <span class="solenoid-valve-title">阀3</span>
              <van-switch v-model="valve3" />
            </div>

            <div class="solenoid-valve-item">
              <span class="solenoid-valve-title">阀4,6</span>
              <van-switch v-model="valve4_6" />
            </div>

            <div class="solenoid-valve-item">
              <span class="solenoid-valve-title">阀5,7</span>
              <van-switch v-model="valve5_7" />
            </div>

            <div class="solenoid-valve-item">
              <span class="solenoid-valve-title">所有</span>
              <van-switch v-model="all_valve" />
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>

    <!-- 底部tab栏 -->
    <BottomTabBar></BottomTabBar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 折叠面板当前激活
// const activeNames = ref([
//   'mission-point',
//   'brake-control',
//   'drive-motor-control',
//   'sensor-control',
//   'tray-lift',
//   'motor-control',
//   'lift1',
//   'lift2',
//   'solenoid-valve',
// ])
const activeNames = ref([])

// 抱闸控制
const liftBrakeSwitch = ref(false)
const allBrakeSwitch = ref(false)

// 电磁阀
const valve1 = ref(false)
const valve2 = ref(false)
const valve3 = ref(false)
const valve4_6 = ref(false)
const valve5_7 = ref(false)
const all_valve = ref(false)
</script>

<style lang="scss" scoped>
.setting-container {
  height: 100%;
  overflow: auto; // 只允许内部滚动（如果内容真的超出）
  padding: var(--van-nav-bar-height) 0 var(--van-tabbar-height);

  .setting-main {
    // 折叠面板
    .van-collapse {
      // 抱闸控制
      .brake-control-container {
        .brake-box {
          display: flex;
          justify-content: start;

          .brake-item {
            display: flex;
            align-items: center;
            margin-right: 10px;
            .brake-title {
              margin-right: 4px;
            }
          }
        }
      }

      // 行驶电机控制
      .drive-motor-control-container {
        .drive-motor-control-box {
          display: flex;
          justify-content: space-between;
          .drive-motor-control-item {
            margin-right: 6px;
          }
        }
      }

      // 传感器控制
      .sensor-control-container {
        .sensor-control-box {
          display: flex;
          justify-content: space-between;
          .sensor-control-item {
            margin-right: 6px;
          }
        }
      }

      // 托盘顶升
      .tray-lift-container {
        .tray-lift-box {
          display: flex;
          justify-content: space-between;
          .tray-lift-item {
            margin-right: 6px;
          }
        }
      }

      // 电机控制
      .motor-control-container {
        .motor-control-box {
          display: flex;
          justify-content: space-between;
          .motor-control-item {
            margin-right: 6px;
          }
        }
      }

      // 升降电机1
      .lift1-container {
        .lift1-box {
          display: flex;
          justify-content: space-between;
          .lift1-item {
            margin-right: 6px;
          }
        }
      }

      // 升降电机2
      .lift2-container {
        .lift2-box {
          display: flex;
          justify-content: space-between;
          .lift2-item {
            margin-right: 6px;
          }
        }
      }

      // 电磁阀
      .solenoid-valve-container {
        .solenoid-valve-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .solenoid-valve-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
